<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Scaled background-image</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="copyright" content="Copyright (C) Mark Schenk, 2003-2006"/></head>
<body id="www-markschenk-com"><xhtml:div xmlns:xhtml="http://www.w3.org/1999/xhtml" id="mainContent"><xhtml:div class="bd" id="content">
<h1>Scaling background image</h1>
<p>Always wanted to have a background image that scaled to your window size? Well, it is possible with some CSS trickery.</p>
<p>The background-image you see here is absolute-positioned to the body and it scales to the width and height of the page. This also means that the image is slightly distored when using a different screen ratio.</p>
<p>A problem with absolute positioning the image is, that if there is so much text that a vertical scrollbar is needed, the image will scroll with the canvas. This can easily be circumvented by using position:fixed on the image, but this doesn't work in IE6 but only in Opera.</p>
</xhtml:div></xhtml:div></body>
</html>
